<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="app">
		<span>123</span>
		<span>234</span>
	</div>
	<script type="text/javascript">
		//parent.innerHTML 获取内容，能改变parent里面的html内容
		var div = document.getElementsByTagName('div')[0];
		console.log(div.innerHTML);//取操作
	</script>

	<script type="text/javascript">
		
		var div = document.getElementsByTagName('div')[0];
		div.innerHTML = '123'//给div赋值
		console.log(div.innerHTML);
		div.innerHTML = 'asx';//给div里值覆盖
		console.log(div.innerHTML);
		div.innerHTML += '123';//将值加上赋给自身，可写可读的东西才能加等于	
		console.log(div.innerHTML);
	</script>

	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		div.innerHTML = "<span style='background-color:red;color:#fff;font-size:20px'>234</span>";
		console.log(div.innerHTML);

		console.log(div.innerText);//取文本内容;火狐是textContent(老版本IE不好使)
		div.innerText = 'asd';//会把值覆盖
		console.log(div);

	</script>

	节点的方法
	setAttribute,getAttribute
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		div.setAttribute('class','nav');//前面是属性名，后面是属性值
		div.setAttribute('id','only');
		console.log(div);
	</script>
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		console.log(div);
		console.log(div.getAttribute('class'));
		
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#only{
			font-size:20px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>123</div>
	//可以通过js动态的修改属性
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		div.setAttribute('id','only');
	</script>
</body>
</html>

